<template>
  <div class="app-container">
    <div class="head-container">
      <el-form size="small" label-width="100px" v-formkey="{query:crud.toQuery}">
        <el-row >
          <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
            <el-form-item label="业务日期">
              <div class="flex flex-row">
                <el-date-picker
                  v-model="query.startDate"
                  align="right"
                  unlink-panels
                  class="fl1"
                  format="yyyy - MM - dd "
                  value-format="yyyy-MM-dd"
                  default-value
                  range-separator=""
                  placeholder="开始日期"
                />
                <el-date-picker
                  v-model="query.endDate"
                  align="right"
                  unlink-panels
                  class="fl1"
                  format="yyyy - MM - dd "
                  value-format="yyyy-MM-dd"
                  default-value
                  range-separator=""
                  placeholder="结束日期"
                />
              </div>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
            <el-form-item label="人员">
              <table-select
                :tableColumns="
                              [
                              {prop:'code',label:'人员编码',width: '100'},
                              {prop:'name',label:'人员名称',width: '150'},
                              ]"
                labelKey="name"
                valueKey="id"
                width="400"
                :value.sync="crud.query.userId"
                placeholder="请选择人员"
                url="api/dropDown/sysUserList"
                :multiple="false"
              />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6"  style="margin-bottom: 5px;margin-top: 5px">
            <rrOperation :crud="crud"/>
          </el-col>
        </el-row>
      </el-form>
      <!--工具栏-->
      <crudOperation :permission="permission"/>
      <!--表格渲染-->
      <el-table ref="table"
                border
                v-if="isShowTable"
                @header-dragend="changeColWidth"
                @contextmenu.native="showMenu"
                :height="tableHeight"
                show-summary
                v-loading="crud.loading"
                :data="crud.data"
                size="small"
                style="width: 100%;"
                :summary-method="crud.sumRow"
                @row-click="crud.selectRow"
                :row-style="crud.rowClass"
                :row-class-name="crud.tableRowClassName"
                @selection-change="crud.selectionChangeHandler">
        <el-table-column :render-header="crud.renderHeader" type="selection" width="60" />
        <el-table-column :render-header="crud.renderHeader" type="index" width="60" label="序号"/>
        <el-table-column :render-header="crud.renderHeader" prop="createUserName"  width="100" label="创建人" />
        <el-table-column :render-header="crud.renderHeader"  prop="subjectName" width="100" label="费用名称"/>
        <el-table-column :render-header="crud.renderHeader"    label="照片列表">
          <template slot-scope="{row}" >
            <el-image style="width: 50px;margin-right: 10px" v-for="item in row.imgList" :src="item" :preview-src-list="row.imgList"/>
          </template>
        </el-table-column>
        <el-table-column :render-header="crud.renderHeader"  prop="remark" width="300" label="费用说明"/>
      </el-table>
      <!--分页组件-->
      <pagination />

    </div>
  </div>
</template>

<script>
import tempFeeWriteOff from '@/api/erp/tempFeeWriteOff'
import CRUD, { presenter, header, form, crud } from '@crud/crud'
import rrOperation from '@crud/RR.operation'
import crudOperation from '@crud/CRUD.operation'
import udOperation from '@crud/UD.operation'
import pagination from '@crud/Pagination'
import JtgTree from "@/components/Tree/JtgTreePlus";
import {tablemixins} from "@/mixins/tablemixins";
import jTableColumnConfig from "@/components/jTableColumnConfig/jTableColumnConfig";
import { publicListKey } from "@/utils/key";
import {getBuyOrderPreviousNextPageIdList} from "../../../api/erp/buyOrder";
// crud交由presenter持有
const defaultCrud = CRUD({ title: '临时费用核销', name:'tempFeeWriteOff',url: '/api/tmpFeePay', optShow: {
    add: false,
    edit: false,
    del: false,
    download: true,
    leadingIn: false,
    enable: false,
    downloadDetail: false,
    disable: false,
    pass: false,
    reject: false
  }, query:{
    startTime: null,endDate:null,dataExtent:null,
  },  sort: 'id,desc', crudMethod: { ...tempFeeWriteOff }})
const defaultForm = { id: null, orderId: null, sourceDetailId: null, goodsId: null, goodsCode: null, goodsName: null, barcode: null, boxBarcode: null, helpSign: null, model: null, goodsBrandId: null, goodsBrandCode: null, goodsBrandName: null, goodsTypeId: null, goodsTypeCode: null, goodsTypeName: null, goodsTagId: null, goodsTagCode: null, goodsTagName: null, taxId: null, taxCode: null, taxName: null, taxRate: null, warehouseId: null, warehouseCode: null, warehouseName: null, locationId: null, locationCode: null, locationName: null, storehouseId: null, storehouseCode: null, storehouseName: null, batchNo: null, producedDate: null, deadlineDate: null, boxUnitId: null, boxUnitCode: null, boxUnitName: null, boxUnitCount: null, boxNum: null, mainUnitId: null, mainUnitCode: null, mainUnitName: null, mainUnitCount: null, mainNum: null, usableNum: null, usableBoxNum: null, goodsCount: null, boxCount: null, taxPrice: null, noTaxPrice: null, taxBoxPrice: null, noTaxBoxPrice: null, taxAmount: null, noTaxAmount: null, tax: null, discountRate: null, discountAmount: null, oldTaxPrice: null, oldNoTaxPrice: null, oldTaxBoxPrice: null, oldNoTaxBoxPrice: null, oldTaxAmount: null, oldNoTaxAmount: null, oldTax: null, acceptCount: null, acceptBoxCount: null, acceptTaxAmount: null, acceptNoTaxAmount: null, acceptTax: null, appendGoodsCount: null, appendBoxCount: null, unAppendGoodsCount: null, unAppendBoxCount: null, seq: null, remark: null, createUserId: null, createUserCode: null, createUserName: null, createTime: null, updateUserId: null, updateUserCode: null, updateUserName: null, updateTime: null }
export default {
  name: 'tempFeeWriteOff',
  components: { pagination, crudOperation, rrOperation, udOperation,JtgTree, jTableColumnConfig },
  mixins: [presenter(defaultCrud), header(), form(defaultForm), crud(),tablemixins,publicListKey],
  data() {
    return {
      permission: {
        add: ['admin', 'buyOrder:add'],
        edit: ['admin', 'buyOrder:edit'],
        del: ['admin', 'buyOrder:del'],
        import: ['admin', 'buyOrder:import'],
        export: ['admin', 'buyOrder:export'],
        copy: ['admin', 'buyOrder:copy'],
        upload: ['admin', 'buyOrder:upload'],
        download: ['admin', 'buyOrder:download'],
        pass: ['admin', 'buyOrder:pass'],
        reject: ['admin', 'buyOrder:reject'],
        closed: ['admin', 'buyOrder:closed'],
        invalid: ['admin', 'buyOrder:invalid'],
        stop: ['admin', 'buyOrder:stop'],
        recover: ['admin', 'buyOrder:recover'],
        print: ['admin', 'buyOrder:print'],
        addDetail: ['admin', 'buyOrder:addDetail'],
        batchAddDetail: ['admin', 'buyOrder:batchAddDetail'],
        accept: ['admin', 'buyOrder:accept'],
      },
      tableHeight: 0
    }
  },
  created() {
    this.setTableHeight()
  },
  mounted() {
    let _this = this
    window.onresize = () => {
      return (() => {
        _this.setTableHeight()
      })();
    };
    // this.$refs.table.bodyWrapper.style.transform = 'translate(100)'
    // console.log(this.$refs.table.bodyWrapper)

  },
  methods: {
    toQuery(){
      this.crud.props.searchToggle = !this.crud.props.searchToggle
      this.crud.toQuery()
    },
    setQuery(id){
      getBuyOrderPreviousNextPageIdList({...this.query,id,...this.crud.page,sort:this.query.sort || this.crud.sort}).then(res=>{
        const idDate = Date.now().toString()
        sessionStorage.setItem(idDate,JSON.stringify(res.data))
        this.$router.push({ path:`buyOrderDetail/${id}?idDate=${idDate}`})
      })
    },
    setTableHeight(){
      const ratio =this.getRatio() / 100
      this.tableHeight = (window.screen.height - (200*ratio)) / ratio
    },
    getRatio() {
      var ratio = 0;
      var screen = window.screen;
      var ua = navigator.userAgent.toLowerCase();

      if (window.devicePixelRatio !== undefined) {
        ratio = window.devicePixelRatio;
      } else if (~ua.indexOf('msie')) {
        if (screen.deviceXDPI && screen.logicalXDPI) {
          ratio = screen.deviceXDPI / screen.logicalXDPI;
        }

      } else if (window.outerWidth !== undefined && window.innerWidth !== undefined) {
        ratio = window.outerWidth / window.innerWidth;
      }

      if (ratio) {
        ratio = Math.round(ratio * 100);
      }
      return ratio;
    },
    // 获取数据前设置好接口地址
    [CRUD.HOOK.afterRefresh]() {
      //拆分照片
      this.crud.data.forEach((item, index) => {
        const imgList = JSON.parse(item.imageUrl)[""]
        console.log(imgList)
        this.$set(this.crud.data[index], "imgList", imgList)
        if(Array.isArray(item.imgList)){
          item.imgList = item.imgList.map(val=>'//images.weserv.nl/?url='+val)
        }
      })
      return true
    }, // 新增与编辑前做的操作
    [CRUD.HOOK.afterToCU](crud, form) {
    },
    getValue(e){
      this.query.startTime =this.query.dataExtent[0]
      this.query.endTime =this.query.dataExtent[1]
    },
  }
}
</script>

<style lang="scss" scoped>
.table-img {
  display: inline-block;
  text-align: center;
  background: #ccc;
  color: #fff;
  white-space: nowrap;
  position: relative;
  overflow: hidden;
  vertical-align: middle;
  width: 32px;
  height: 32px;
  line-height: 32px;
}
.red{
  color: red;
}
.blue{
  *{
    color: blue !important;
  }
}
</style>
